<template>
  <div
    ref="drawerB"
    class="wrapper"
    style="top: 55%;"
    v-show="drawer"
    @click.self="$emit('click', false)"
  >
    <!-- v-clickoutside="close" -->
    <div class="wrapper-contain">
      <slot name="operateIcon"></slot>
      <i class="el-icon-close" @click.stop="$emit('click', false)" title="关闭"></i>
      <div class="wrapper-title">{{name}}详情</div>
      <slot name="content"></slot>
    </div>
  </div>
</template>

<script>
// import Clickoutside from "element-ui/src/utils/clickoutside";

export default {
  // directives: { Clickoutside },

  model: {
    prop: "drawer",
    event: "click"
  },
  props: ["drawer", "name"],

  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("click", false);
    }
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.wrapper {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  margin: 0;
  transition: top 0.3s ease;
  // background-color: rgba(0, 0, 0, 0.2);
}
.wrapper-contain {
  position: relative;
  background-color: #fff;
  height: 100%;
  i {
    position: absolute;
    top: 13px;
    right: 20px;
    font-size: 24px;
    cursor: pointer;
  }
  .wrapper-title {
    height: 50px;
    line-height: 50px;
    background-color: rgba(0, 0, 4, 0.08);
    padding: 0 50px 0 20px;
  }
  .wrapper-content {
    padding: 30px 20px 20px 20px;
    height: calc(100% - 50px);
    overflow: auto;
  }
  // &::before {
  //   content: "";
  //   position: fixed;
  //   left: calc(50% - 6px);
  //   width: 6px;
  //   height: 100%;
  //   background: linear-gradient(
  //     270deg,
  //     hsla(0, 0%, 77.3%, 0.8),
  //     hsla(0, 0%, 82.7%, 0.3)
  //   );
  // }
}
</style>